﻿<h3>
    <span data-bind="text: match().Time"></span>
    <span data-bind="text: match().HomeTeam"></span>
    <span data-bind="text: match().HomeGoals"></span>-
    <span data-bind="text: match().AwayGoals"></span>
    <span data-bind="text: match().AwayTeam"></span>@
    <span data-bind="text: match().Stadium"></span>
</h3>
<table>

    <tr>

        <td>
            <span data-bind="text: match().HomeLineupsGoalkeeper"></span>
            <span class="goal" data-bind="text: $root.goalState(match().HomeLineupsGoalkeeper)"></span>
            <span class="yellow" data-bind="text: $root.yellowState(match().HomeLineupsGoalkeeper)"></span>
            <span class="red" data-bind="text: $root.redState(match().HomeLineupsGoalkeeper)"></span>
            <span class="out" data-bind="text: $root.outState(match().HomeLineupsGoalkeeper)"></span>
        </td>

        <td>
            <ul data-bind="foreach: match().HomeLineupsDefence">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <ul data-bind="foreach: match().HomeLineupsMidfield">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <ul data-bind="foreach: match().HomeLineupsForward">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <ul data-bind="foreach: match().AwayLineupsForward">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <ul data-bind="foreach: match().AwayLineupsMidfield">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <ul data-bind="foreach: match().AwayLineupsDefence">
                <li>
                    <span data-bind="text: $data"></span>
                    <span class="goal" data-bind="text: $root.goalState($data)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState($data)"></span>
                    <span class="red" data-bind="text: $root.redState($data)"></span>
                    <span class="out" data-bind="text: $root.outState($data)"></span>
                </li>
            </ul>
        </td>

        <td>
            <span data-bind="text: match().AwayLineupsGoalkeeper"></span>
            <span class="goal" data-bind="text: $root.goalState(match().AwayLineupsGoalkeeper)"></span>
            <span class="yellow" data-bind="text: $root.yellowState(match().AwayLineupsGoalkeeper)"></span>
            <span class="red" data-bind="text: $root.redState(match().AwayLineupsGoalkeeper)"></span>
            <span class="out" data-bind="text: $root.outState(match().AwayLineupsGoalkeeper)"></span>
        </td>

    </tr>

    <tr>

        <td colspan="4">
            <ul data-bind="foreach: match().HomeSubsIn">
                <li>
                    <span data-bind="text: Player"></span>
                    <span data-bind="text: Time"></span>
                    <span class="goal" data-bind="text: $root.goalState(Player)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState(Player)"></span>
                    <span class="red" data-bind="text: $root.redState(Player)"></span>
                </li>
            </ul>
        </td>

        <td colspan="4">
            <ul data-bind="foreach: match().AwaySubsIn">
                <li>
                    <span data-bind="text: Player"></span>
                    <span data-bind="text: Time"></span>
                    <span class="goal" data-bind="text: $root.goalState(Player)"></span>
                    <span class="yellow" data-bind="text: $root.yellowState(Player)"></span>
                    <span class="red" data-bind="text: $root.redState(Player)"></span>
                </li>
            </ul>
        </td>

    </tr>


</table>
<div id="timeline"></div>
<div id="audience"></div>
